<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员设置 - 会员中心 - 散文吧</title>
    <link href="__ROOT__/shiwen/pc/xin/css/manage.css" rel="stylesheet" type="text/css" />
    <style>
        .subject,.content,.submit{border-radius: 3px;}
        .subject{width:610px; padding:7px; border:1px solid #ccc; height:25px; font-size:24px;}
        .content{ width:610px; padding:7px; border:1px solid #ccc; height:300px; overflow:auto;}
        .submit{padding:8px 20px; font-weight:bold; color:#fff; background:#ff8800; border:none;}

        .frmarea{padding:15px 10px}
        em{ font-style:normal;}
        small{color:#999;margin-left:5px;}
        .item{margin:5px 0 10px;}
        .category{border:1px solid #eee; padding:5px 0; width:624px;}

        #setting{ border:1px solid #eee; border-radius:5px; padding:30px 20px;}
        label{display:block; font-size:12px; color:#666;}
        .ipt-txt{padding:5px; height:22px; line-height:22px; width:250px; border:1px solid #ccc;}
        textarea{width:360px; height:60px; padding:5px; border:1px solid #ccc; overflow:hidden;}
        .penanme,.email,.sex{margin-bottom:15px;}
        .btn{ background:#F16E50; color:#fff; padding:5px 15px; border:1px solid #F16E50;}

        html, body { height:100%; overflow:hidden; }
        body { margin:0; }
        .toux{width:800px;height:600px;position:absolute;left:40%;top:8%;z-index:9999;display:none;}
        .masker{position: absolute;z-index: 998;top: 0;left: 0;right: 0;bottom: 0;background-color: #000;opacity: .5;display:none;}
    </style>
    <script type="text/javascript" src="__ROOT__/static/plugs/jquery/jquery.min.js"></script>
    <script src="__ROOT__/shiwen/pc/xin/js/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="__ROOT__/shiwen/pc/xin/css/sweetalert.css">

    <link rel="stylesheet" type="text/css" href="__ROOT__/shiwen/pc/xin/cropper/cropper.min.css">
    <script src="__ROOT__/shiwen/pc/xin/cropper/cropper.min.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="__ROOT__/static/plugs/layui/css/layui.css">
    <script src="__ROOT__/static/plugs/layui/layui.js" type="text/javascript"></script>
<!--    <script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>-->
<!--    <script type="text/javascript">-->
<!--        window.onload=function(){-->
<!--            /*第1个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是div容器高*/-->
<!--            xiuxiu.embedSWF("altContent",5,"80%","80%");-->
<!--            //修改为您自己的图片上传接口-->
<!--            xiuxiu.setUploadURL("http://web.upload.meitu.com/image_upload.php");-->
<!--            xiuxiu.setUploadType(2);-->
<!--            xiuxiu.setUploadDataFieldName("upload_file");-->
<!--            xiuxiu.onInit = function () {-->
<!--                var img =$(".tt").val();-->
<!--                xiuxiu.loadPhoto("http://okshiwen.cn"+img);-->
<!--            }-->
<!--            xiuxiu.onUploadResponse = function (data) {-->
<!--                $.post("{:url('member/headUpload')}",{'url':data},function(msg){-->
<!--                    if(msg.status==1) {-->
<!--                        swal("Good!", msg.info, "success");-->
<!--                        var str="<img src="+msg.url+" /><input type='hidden' class='tt' value="+msg.url+">";-->
<!--                        $('.ttt').html(str);-->
<!--                        $(".masker").hide();-->
<!--                        $(".toux").hide();-->
<!--                    } else {-->
<!--                        swal("OMG!", msg.info, "error");-->
<!--                        $(".masker").hide();-->
<!--                        $(".toux").hide();-->
<!--                    }-->
<!--                });-->
<!--            }-->
<!--        }-->
<!--    </script>-->
</head>
<body>
<!--<div class="masker" style="width: 1920px; height: 1353px;"></div>-->
<!--<div class="toux">-->
<!--    <div id="altContent">-->
<!--        <h1>美图秀秀</h1>-->
<!--    </div>-->
<!--</div>-->
<div class="wrapper">
    {include file="pc/member/header"}
    <div id="content">
        <div id="setting">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="50%" valign="top" style="border-right:1px solid #eee;">
                        <h2>基本信息设置</h2>
                        <div class="penname"><label>笔名：</label><input name="penname" id="name" class="ipt-txt" value="{$list.penname}" maxlength="10" type="text" /></div>
                        <div class="email"><label>邮箱：<em>(对外保密)</em></label><input id="email" name="email" class="ipt-txt" value="{$list.email}" type="text" /></div>
                        <div class="email"><label>qq：<em>(对外保密)</em></label><input name="qq" id="qq" value="{$list.qq}" class="ipt-txt" maxlength="12" type="text" /></div>
                        <div class="email"><label>电话：<em>(对外保密)</em></label><input name="mobile" id="mobile" value="{$list.mobile}" class="ipt-txt" type="text" /></div>
                        <div class="signature"><label>个性签名：</label><textarea name="intr" id="intr" style="height:40px; width:428px">{$list.intr}</textarea></div>
                        <div style="margin-top:15px;"><input type="submit" value="保存资料" class="btn btn1" /></div>
                    </td>
                    <td valign="top" style="padding:0 15px;">
                        <h2>用户头像设置</h2>
                        <div class=""><label>原头像</label>
                            <div class="ttt" style="height: 200px">
                                <img src="{$list.avatar}" /><input type="hidden" class="tt" height="100px" value="{$list.avatar}">
                            </div>
                            <div style="margin:15px 0;">
                                <div></div>
                                <div style="margin-top:15px;">
<!--                                    <input type="submit" value="上传头像" class="btn btn2" />-->
                                    <input type="button" id="uploadBtn" value="上传头像" class="btn" />
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="footer">&copy;2006-<?php echo date('Y'); ?> www.okshiwen.cn</div>
</div>

<script>
    $(document).ready(function(){
        $(".btn1").click(function(){
            var penname=$("#name").val();
            var email=$("#email").val();
            var qq=$("#qq").val();
            var mobile=$("#mobile").val();
            var intr=$("#intr").val();
            if(penname=='') {
                swal("OMG!", "客官，这家伙忘记写笔名了!!!", "error");
                return false;
            }
            $.ajax({
                url: '/doSetting',
                type: 'POST',
                dataType: 'json',
                data: {
                    'penname':penname,
                    'email':email,
                    'qq':qq,
                    'mobile':mobile,
                    'intr':intr
                },
                success: function(res) {
                    if (res.code == 200) {
                        swal("Good!", res.msg, "success");
                    } else {
                        swal("OMG!", res.msg, "error");

                    }
                }

            });
        });

        // $(".btn2").click(function(){
        //     $(".masker").css('display','block');
        //     $(".toux").css('display','block');
        // });
        //
        // $(".masker").click(function(){
        //     $(".masker").css('display','none');
        //     $(".toux").css('display','none');
        // });
    });
</script>
<!--<link href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.css" rel="stylesheet">-->
<!--<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.js"></script>-->
<script>
    // 使用Layui实现图片上传和裁剪功能
    layui.use(['upload', 'layer', 'jquery'], function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var $ = layui.$;

        // 存储cropper实例
        var cropper = null;
        var cropperImage = null;

        // 上传实例
        upload.render({
            elem: '#uploadBtn',
            url: '{:url("member/uploadImg")}', // 修改为您的上传接口
            accept: 'images',
            acceptMime: 'image/*',
            before: function(obj){
                // 显示加载中
                layer.msg('图片上传中...', {icon: 16, time: 0});
            },
            done: function(res){
                layer.closeAll('loading');
                if(res.code == 200) {
                    // 显示裁剪界面
                    showCropper(res.data['url']);
                } else {
                    layer.msg(res.info || '上传失败', {icon: 2});
                }
            },
            error: function(){
                layer.closeAll('loading');
                layer.msg('上传出错', {icon: 2});
            }
        });

        // 显示裁剪界面
        function showCropper(imageUrl) {
            // 弹出裁剪层
            layer.open({
                type: 1,
                title: '图片裁剪 - 请调整裁剪区域',
                content: [
                    '<div class="cropper-container">',
                    '   <img id="cropper-image" src="'+imageUrl+'" style="max-width: 100%">',
                    '</div>',
                    '<div class="cropper-buttons">',
                    '   <button class="layui-btn layui-btn-primary" id="cropper-cancel">取消</button>',
                    '   <button class="layui-btn" id="cropper-submit">确认裁剪</button>',
                    '</div>'
                ].join(''),
                area: ['800px', '600px'],
                success: function(layero, index){
                    // 初始化Cropper
                    var image = document.getElementById('cropper-image');
                    cropper = new Cropper(image, {
                        aspectRatio: 1, // 1:1比例
                        viewMode: 1,
                        autoCropArea: 0.8,
                        responsive: true,
                        guides: true
                    });

                    // 取消按钮事件
                    $('#cropper-cancel').on('click', function(){
                        layer.close(index);
                    });

                    // 确认裁剪按钮事件
                    $('#cropper-submit').on('click', function(){
                        // 获取裁剪后的图片数据
                        var croppedCanvas = cropper.getCroppedCanvas({
                            width: 200, // 输出宽度
                            height: 200 // 输出高度
                        });

                        if (!croppedCanvas) {
                            layer.msg('裁剪失败，请重试', {icon: 2});
                            return;
                        }

                        // 转换为Blob对象
                        croppedCanvas.toBlob(function(blob) {
                            // 创建FormData对象
                            var formData = new FormData();
                            formData.append('file', blob, 'avatar.jpg');

                            // 显示上传中提示
                            layer.msg('正在上传裁剪后的图片...', {icon: 16, time: 0});

                            // 上传裁剪后的图片
                            $.ajax({
                                url: '{:url("member/headUpload")}',
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function(res) {
                                    layer.closeAll('loading');
                                    if(res.code == 200) {
                                        layer.msg('头像上传成功', {icon: 1});
                                        $('.ttt').html('<img src="'+res.data['avatar']+'" /><input type="hidden" class="tt" value="'+res.data['avatar']+'">');
                                        layer.close(index);
                                    } else {
                                        layer.msg('头像上传成功', {icon: 1});
                                        location.reload();
                                    }
                                },
                                error: function() {
                                    layer.closeAll('loading');
                                    layer.msg('上传出错', {icon: 2});
                                }
                            });
                        }, 'image/jpeg', 0.9); // 90%质量
                    });
                },
                cancel: function(){
                    // 销毁cropper实例
                    if (cropper) {
                        cropper.destroy();
                        cropper = null;
                    }
                }
            });
        }
    });
</script>
</body>
</html>